
<script>
/**
 js获取方式
 */
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
  computed:{
    //第一种方式，调的是index.js state里面的变量
      ...mapState(['aCount','b','a']),
    //第二种获取方式，调的是index.js getters里的方法名
      ...mapGetters(['getCount','getAa']),
      },
  methods:{
    //第三种获取方式，方法名指向index.js mutations里面的方法名
    ...mapMutations(['addCount','addBB']),
    //第四种获取方式，方法名指向index.js actions里面的方法名
    ...mapActions(['getHttpData']),
    myClick(){
      //调用函数
      //第二种getters方式，调的是index.js getters里的方法名
      this.$store.commit('addCount',2)
    },
    myClick2(){
      //此方式是index.js mutations里面的指定的方法
      //可以直接调用到mutations里面的方法
      this.addCount(2);
      var str=Math.floor(Math.random() * 10);
      this.addBB(str)//随机数
    },
    myClick3(){
     //actions方式1，调用的是index.js actions里面的方法名
      this.$store.dispatch('getHttpData')
      //actions方式2，调用的是index.js actions里面的方法名
      //必须写...mapActions(['getHttpData']),
      this.getHttpData()
    }
  }
}
</script>
<template>
  <hr/>
页面2
  <br>
  第一种获取state变量方式=aCount={{aCount}}，|a={{a}}，|b={{b}}
  <br>
  第二种getters方式获取={{getCount}}，|a={{getAa}}，
  <br>
  <button @click="myClick">getters方式增加</button>
  <br>
  <button @click="myClick2">mutations方式增加</button>
  <br>
  <button @click="myClick3">actions异步方式增加</button>
  <br>
</template>
